/* components */
import { BaseSelectUserDepartmentItem, BaseSelectUserUserItems } from '@src/component/common/BaseSelectUser/components'
/* enum */
import { BaseSelectUserComponentNameEnum, SelectUserComponentDepartment } from '@src/component/common/BaseSelectUser/model'
/* hooks */
import { useSelectUserChecked, useSelectUserCheckedItemList, useSelectUserIsShowCheckbox } from '@src/component/common/BaseSelectUser/hooks'
import { useBaseSelectUserStoreIsFilterVisible } from '@src/component/common/BaseSelectUser/store'
/* scss */
import '@src/component/common/BaseSelectUser/components/Department/item.scss'
/* vue */
// @ts-ignore
import { ComponentInstance, ComponentRenderProxy, computed, defineComponent, PropType } from 'vue'
import { CommonComponentInstance } from '@model/VC'
import { CreateElement } from 'vue'
/* util */
import { isArray, isFalse, isNotEmpty } from '@src/util/type'
import { t } from '@src/locales'

export type DepartmentItemProps = {
  // 是否为多选
  isMulti: boolean;
  // 部门数据
  value: SelectUserComponentDepartment;
  // 是否显示子部门
  showChildren: boolean;
  // 是否显示子部门 树 图标
  showChildrenIcon: boolean;
}

export interface DepartmentItemSetupState {
  
}

export enum DepartmentItemEmitEventNameEnum {
  Input = 'input',
  Click = 'click',
  LowerClick = 'lowerClick',
}

export type DepartmentItemInstance = ComponentInstance & DepartmentItemSetupState
export type DepartmentItemVM = ComponentRenderProxy<DepartmentItemProps> & CommonComponentInstance & DepartmentItemInstance

export default defineComponent({
  name: BaseSelectUserComponentNameEnum.BaseSelectUserDepartmentItem,
  emits: [
    DepartmentItemEmitEventNameEnum.Input,
    DepartmentItemEmitEventNameEnum.Click,
    DepartmentItemEmitEventNameEnum.LowerClick,
  ],
  props: {
    /* 是否为多选状态 */
    isMulti: {
      type: Boolean as PropType<boolean>,
      default: false
    },
    /* 是否显示子部门 */
    showChildren: {
      type: Boolean as PropType<boolean>,
      default: false
    },
    /* 是否显示子部门 图标 */
    showChildrenIcon: {
      type: Boolean as PropType<boolean>,
      default: false
    },
    /* 部门 */
    value: {
      type: Object as PropType<SelectUserComponentDepartment>,
      default: () => ({}),
      require: true
    }
  },
  setup(props: DepartmentItemProps, { emit }) {
    
    const { addCheckedItem, removeCheckedItem } = useSelectUserCheckedItemList()
    const { isChecked, isDisabled, selectLimitMessage } = useSelectUserChecked(props)
    const { isShowDepartmentCheckbox } = useSelectUserIsShowCheckbox()
    
    const { isFilterVisible } = useBaseSelectUserStoreIsFilterVisible()
    
    const isRoot = computed(() => {
      return Boolean(props.value.isRoot)
    })
    
    const isNotRoot = computed(() => isFalse(isRoot.value))
    
    // 当前部门下 人员数量
    const userCount = computed(() => {
      return props.value.userCount || 0
    })
    
    /** 
     * @description 是否显示用户数量
     * 1. 当前部门下人员数量大于0
     */
    const isShowUserCount = computed(() => {
      return Number(userCount.value) > 0
    })
    
    /** 
     * @description 子级部门列表
    */
    const departmentChildren = computed(() => {
      return props.value.tagChildren || []
    })
    
    /** 
     * @description 是否有子级部门
     * 1. 子部门数据不为空
     * 2. 且 子部门数据类型为数据
     * 3. 且 props 属性中 showChildren 配置为 true
    */
    const isHaveChildren = computed(() => {
      return isNotEmpty(departmentChildren.value) && isArray(departmentChildren.value) && props.showChildren
    })
    
    /** 
     * @description 是否显示 下级 按钮
     * 1. 当前部门不是根部门
    */
    const isShowLowerButton = computed(() => {
      return isNotRoot.value
    })
    
    /** 
     * @description 是否有 人员列表数据
     * 1. 人员列表数据不为空
     * 2. 且 人员列表数据类型为数据
    */
    const isHaveUserList = computed(() => {
      return isNotEmpty(props.value.userList) && isArray(props.value.userList)
    })
    
    return {
      isFilterVisible,
      isRoot,
      isNotRoot,
      userCount,
      isHaveChildren,
      isShowLowerButton,
      isHaveUserList,
      isShowUserCount,
      departmentChildren,
      isChecked,
      isDisabled,
      isShowDepartmentCheckbox,
      selectLimitMessage,
      addCheckedItem,
      removeCheckedItem,
    }
    
  },
  methods: {
    onItemLowerClickHandler(value: SelectUserComponentDepartment) {
      this.$emit(DepartmentItemEmitEventNameEnum.LowerClick, value)
    },
    onLowerButtonClickHandler(event?: Event) {
      event?.stopPropagation()
      this.$emit(DepartmentItemEmitEventNameEnum.LowerClick, this.value)
    },
    onClickHandler(value: SelectUserComponentDepartment) {
      
      if (this.isFilterVisible) {
        return
      }
      
      if (this.isMulti) {
        this.onMultiChoseClickHandler()
        return
      }
      
      this.onSingleChoseClickHandler()
      
    },
    onSingleChoseClickHandler() {
      
      if (this.isRoot) {
        return
      }
      
      this.onLowerButtonClickHandler()
    },
    onMultiChoseClickHandler() {
      
      if (isFalse(this.isShowDepartmentCheckbox)) {
        
        if (this.isRoot && isFalse(this.isShowLowerButton)) {
          return
        }
        
        this.onLowerButtonClickHandler()
        
        return
        
      }
      
      if (this.isDisabled) {
        this.selectLimitMessage()
        return
      }
      
      if (this.isChecked) {
        this.removeCheckedItem(this.value)
      } else {
        this.addCheckedItem(this.value)
      }
      
    }
  },
  render(h: CreateElement) {
    
    const classNames = [
      BaseSelectUserComponentNameEnum.BaseSelectUserDepartmentItem
    ]
    
    return (
      <div class="base-select-user-department-item-wrapper">
        
        <div 
          class={classNames}
          onClick={() => this.onClickHandler(this.value)}
        >
          
          {/* start 子部门树图标 */}
          {this.showChildrenIcon && (
            <div class="base-select-user-department-item-children-tree-icon">
              <i class="iconfont icon-shu1"></i>
            </div>
          )}
          {/* end 子部门树图标 */}
          
          {/* start 部门多选 */}
          {this.isShowDepartmentCheckbox && (
            <div class="base-select-user-department-item__checkbox">
              <el-checkbox
                value={this.isChecked}
                onInput={this.onClickHandler}
              >
              </el-checkbox>
            </div>
          )}
          {/* end 部门多选 */}
          
          {/* start 部门头像 */}
          <div class="base-select-user-department-item__head">
            
            {this.value.logo ? (
              <div class="base-select-user-department-item__head-img">
                <img src={this.value.logo} />
              </div>
            ) : (
              <div class="base-select-user-department-item__head-icon">
                <i class="iconfont icon-bumen"></i>
              </div>
            )}
            
          </div>
          {/* end 部门头像 */}
          
          {/* start 部门名称 */}
          <div class="base-select-user-department-item__name">
            { this.value.name }
          </div>
          {/* end 部门名称 */}
          
          {/* start 部门人员数量 */}
          {(
            <div class="base-select-user-department-item__count">
              ({ this.userCount })
            </div>
          )}
          {/* end 部门人员数量 */}
          
          {/* start 部门下级按钮 */}
          {this.isShowLowerButton && (
            <div class="base-select-user-department-item__lower" onClick={this.onLowerButtonClickHandler}>
              
              {/* <span class="base-select-user-department-item__lower-line"></span> */}
              
              <i class="iconfont icon-Partition"></i>
              
              <span class="base-select-user-department-item__lower-text">
                { t('common.base.subordinate') }
              </span>
              
            </div>
          )}
          {/* end 部门下级按钮 */}
          
        </div>
        
        {/* start 子部门列表 */}
        {this.isHaveChildren && (
          <div class="base-select-user-department-item-child">
            {this.value.tagChildren.map(departmentChild => {
              return (
                <BaseSelectUserDepartmentItem
                  show-children-icon
                  key={departmentChild.id}
                  value={departmentChild} 
                  isMulti={this.isMulti}
                  onClick={this.onClickHandler}
                  onLowerClick={this.onItemLowerClickHandler}
                />
              )
            })}
          </div>
        )}
        {/* end 子部门列表 */}
        
        {/* start 部门人员列表 */}
        {this.isHaveUserList && (
          <div class="base-select-user-department-item__user">
            <BaseSelectUserUserItems value={this.value.userList} is-multi={this.isMulti} />
          </div>
        )}
        {/* end 部门人员列表 */}
        
      </div>
    )
  }
})
